import React, {Component} from 'react';
import '../css/successfuleCase.css';
import {Consumer} from "../store";
import {news} from "../value";
import app from '../appMethod';
import moment from 'moment';


import {config} from "../config";
import $ from "jquery";

class News extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data:[],
        };
    }

    render() {
        return (
            <div style={{overflow: 'hidden'}}>
                <div className="newsHeader">
                </div>
                <div className={"newsList"}>
                    <div className={"normalContainer"}>
                        <div className={"newsListLogo"}>
                            技术贴/资讯
                        </div>

                        <div className={"newsListContainer"}>
                            {
                                this.state.data.map((item,index)=>{
                                    return(
                                        <div className={"newsListItem"} onClick={()=>this.handleRedirectDetail(item.news_id)} key={index}>
                                            <div className={"newsTime"}>
                                                <div className={"newsTimeMonth"}>{item.month_date}</div>
                                                <div className={"newsTimeYear"}>{item.year}</div>
                                            </div>
                                            <div className={"newsDetail"}>
                                                <div className={"newsTitle"}>{item.news_title}</div>
                                                <div className={"newsDetailContent"}>
                                                    {item.news_summary}
                                                </div>
                                                <div style={{textAlign:'right',fontWeight:'bold'}}>F:领蓝科技</div>
                                            </div>
                                        </div>
                                    )
                                })
                            }
                        </div>
                        {/*<div className={"loadMore"}>加载更多</div>*/}
                    </div>
                </div>
            </div>
        )
    };

    componentDidMount() {
        const {dispatch} =this.props;
        dispatch({num:5});
        $(document).scrollTop(0);
        this.searchNews({});
    };

    /**
     * 查找新闻列表
     * @param param
     */
    searchNews(param) {
        let _this = this;
        _this.setState({loading: true});
        app.post(news.SEARCH_NEWS, param).then(result => {
            if (result.code === 1) {
                const data=result.data;
                for (let i=0;i<data.length;i++){
                    let created_at=data[i].created_at;
                    created_at=moment(created_at).format('YYYY-MM-DD');
                    let year=created_at.substr(0,4);
                    let month_date=created_at.substr(5,created_at.length-5);
                    data[i].year=year;
                    data[i].month_date=month_date;
                }
                this.setState({ data: data, loading: false });
            } else {
                app.alert(result.msg, 'success', 2);
                this.setState({ data: [], loading: false});
            }
        });
    }

    /**
     * 跳转到详情页
     */
    handleRedirectDetail(news_id){
        this.props.history.push(config.path+`/index/newsDetail/${news_id}`);
    }



}

export default prop=>(
    <Consumer>
        {
            props=>(
                <News {...props} {...prop}/>
            )
        }
    </Consumer>
)
//export default News;